<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>ScrollMagic Class: Scene</title>
	
  <script src="scripts/prettify/prettify.js"> </script>
  <script src="scripts/prettify/lang-css.js"> </script>
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
	<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
	<link rel="shortcut icon" href="../assets/img/favicon.ico" type="image/x-icon">

	
	<link type="text/css" rel="stylesheet" href="styles/site.cosmo.css">
	
</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="index.html">ScrollMagic</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Controller.html">Controller</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html">Scene</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="ScrollMagic.Scene.html#event:add">add</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:change">change</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:destroy">destroy</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:end">end</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:enter">enter</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:leave">leave</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:progress">progress</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:remove">remove</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:shift">shift</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:start">start</a>
						</li>
						
						<li>
							<a href="ScrollMagic.Scene.html#event:update">update</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="mixins.list.html" class="dropdown-toggle" data-toggle="dropdown">Plugins<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="animation.GSAP.html">GSAP</a>
						</li>
						
						<li>
							<a href="animation.Velocity.html">Velocity</a>
						</li>
						
						<li>
							<a href="debug.addIndicators.html">addIndicators</a>
						</li>
						
						<li>
							<a href="framework.jQuery.html">jQuery</a>
						</li>
						

					</ul>
				</li>
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					


	<h1 class="page-title">
        <span class="ancestors"><a href="ScrollMagic.html">ScrollMagic</a>.</span>Scene</h1>
    
<section>

<article>
    <div class="container-overview">
    

    
        
<dt>
    <h4 class="name" id="constructor"><span class="type-signature"></span>new ScrollMagic.Scene<span class="signature">(<span class="optional">options</span>)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>A Scene defines where the controller should react and how.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>Options for the Scene. The options can be updated at any time.<br>                                Instead of setting the options for each scene individually you can also set them globally in the controller as the controllers <code>globalSceneOptions</code> option. The object accepts the same properties as the ones below.<br>                                When a scene is added to the controller the options defined using the Scene constructor will be overwritten by those set in <code>globalSceneOptions</code>.</p>
                <h6>Properties</h6>
                

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>duration</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>
|

<span class="param-type">string</span>
|

<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The duration of the scene.<br>                     Please see <code>Scene.duration()</code> for details.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>Offset Value for the Trigger Position. If no triggerElement is defined this will be the scroll distance from the start of the page, after which the scene will start.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>triggerElement</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    null
                
                </td>
            

            <td class="description last"><p>Selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>triggerHook</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>
|

<span class="param-type">string</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    "onCenter"
                
                </td>
            

            <td class="description last"><p>Can be a number between 0 and 1 defining the position of the trigger Hook in relation to the viewport.<br>                                                               Can also be defined using a string:</p>
<ul>
<li><code>&quot;onEnter&quot;</code> =&gt; <code>1</code></li>
<li><code>&quot;onCenter&quot;</code> =&gt; <code>0.5</code></li>
<li><code>&quot;onLeave&quot;</code> =&gt; <code>0</code></li>
</ul></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>reverse</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    true
                
                </td>
            

            <td class="description last"><p>Should the scene reverse, when scrolling up?</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>loglevel</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    2
                
                </td>
            

            <td class="description last"><p>Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.</p>
<ul>
<li><code>0</code> =&gt; silent</li>
<li><code>1</code> =&gt; errors</li>
<li><code>2</code> =&gt; errors, warnings</li>
<li><code>3</code> =&gt; errors, warnings, debuginfo</li>
</ul></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene.js.html">ScrollMagic/Scene.js</a>, <a href="ScrollMagic_Scene.js.html#sunlight-1-line-39">line 39</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// create a standard scene and add it to a controllernew ScrollMagic.Scene()		.addTo(controller);// create a scene with custom options and assign a handler to it.var scene = new ScrollMagic.Scene({		duration: 100,		offset: 200,		triggerHook: "onEnter",		reverse: false});</pre>


    
</dd>

    
    </div>

    

    

    

    

    

    

    
        <h3 class="subsection-title">Scene Control Methods</h3>

        <dl>
            
<dt>
    <h4 class="name" id="addTo"><span class="type-signature"></span>addTo<span class="signature">(controller)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Add the scene to a controller.<br>This is the equivalent to <code>Controller.addScene(scene)</code>.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>controller</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="ScrollMagic.Controller.html">ScrollMagic.Controller</a></span>


            
            </td>

            

            

            <td class="description last"><p>The controller to which the scene should be added.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_core.js.html">ScrollMagic/Scene/core.js</a>, <a href="ScrollMagic_Scene_core.js.html#sunlight-1-line-34">line 34</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// add a scene to a ScrollMagic Controller
scene.addTo(controller);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="controller"><span class="type-signature"></span>controller<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="ScrollMagic.Controller.html">ScrollMagic.Controller</a>}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> the associated controller.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-235">line 235</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent controller or <code>undefined</code></p>

	{
<span class="param-type"><a href="ScrollMagic.Controller.html">ScrollMagic.Controller</a></span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the controller of a scene
var controller = scene.controller();</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="destroy"><span class="type-signature"></span>destroy<span class="signature">(<span class="optional">reset</span>)</span><span class="type-signature"> &rarr; {null}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Destroy the scene and everything.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>reset</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>If <code>true</code> the pin and tween (if existent) will be reset.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_core.js.html">ScrollMagic/Scene/core.js</a>, <a href="ScrollMagic_Scene_core.js.html#sunlight-1-line-117">line 117</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Null to unset handler variables.</p>

	{
<span class="param-type">null</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// destroy the scene without resetting the pin and tween to their initial positions
scene = scene.destroy();

// destroy the scene and reset the pin and tween
scene = scene.destroy(true);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="progress"><span class="type-signature"></span>progress<span class="signature">(<span class="optional">progress</span>)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the scene's progress.<br>Usually it shouldn't be necessary to use this as a setter, as it is set automatically by scene.update().<br>The order in which the events are fired depends on the duration of the scene:</p>
<ol>
<li>Scenes with <code>duration == 0</code>:<br>Scenes that have no duration by definition have no ending. Thus the <code>end</code> event will never be fired.<br>When the trigger position of the scene is passed the events are always fired in this order:<br><code>enter</code>, <code>start</code>, <code>progress</code> when scrolling forward<br>and<br><code>progress</code>, <code>start</code>, <code>leave</code> when scrolling in reverse</li>
<li>Scenes with <code>duration &gt; 0</code>:<br>Scenes with a set duration have a defined start and end point.<br>When scrolling past the start position of the scene it will fire these events in this order:<br><code>enter</code>, <code>start</code>, <code>progress</code><br>When continuing to scroll and passing the end point it will fire these events:<br><code>progress</code>, <code>end</code>, <code>leave</code><br>When reversing through the end point these events are fired:<br><code>enter</code>, <code>end</code>, <code>progress</code><br>And when continuing to scroll past the start position in reverse it will fire:<br><code>progress</code>, <code>start</code>, <code>leave</code><br>In between start and end the <code>progress</code> event will be called constantly, whenever the progress changes.</li>
</ol>
<p>In short:<br><code>enter</code> events will always trigger <strong>before</strong> the progress update and <code>leave</code> envents will trigger <strong>after</strong> the progress update.<br><code>start</code> and <code>end</code> will always trigger at their respective position.</p>
<p>Please review the event descriptions for details on the events and the event object that is passed to the callback.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new progress value of the scene <code>[0-1]</code>.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_core.js.html">ScrollMagic/Scene/core.js</a>, <a href="ScrollMagic_Scene_core.js.html#sunlight-1-line-215">line 215</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.enter</code>,event: when used as setter</li>
    
        <li><code>Scene.start</code>,event: when used as setter</li>
    
        <li><code>Scene.progress</code>,event: when used as setter</li>
    
        <li><code>Scene.end</code>,event: when used as setter</li>
    
        <li><code>Scene.leave</code>,event: when used as setter</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    <ul>
            <li>
<div class="param-desc tag-returns">
    <p><code>get</code> -  Current scene progress.</p>

	{
<span class="param-type">number</span>

}

</div>

</li>
        
            <li>
<div class="param-desc tag-returns">
    <p><code>set</code> -  Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>

</li>
        </ul>
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current scene progress
var progress = scene.progress();

// set new scene progress
scene.progress(0.3);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="refresh"><span class="type-signature"></span>refresh<span class="signature">()</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Updates dynamic scene variables like the trigger element position or the duration.<br>This method is automatically called in regular intervals from the controller. See <a href="ScrollMagic.Controller.html"><code>ScrollMagic.Controller</code></a> option <code>refreshInterval</code>.</p>
<p>You can call it to minimize lag, for example when you intentionally change the position of the triggerElement.<br>If you don't it will simply be updated in the next refresh interval of the container, which is usually sufficient.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>1.1.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_core.js.html">ScrollMagic/Scene/core.js</a>, <a href="ScrollMagic_Scene_core.js.html#sunlight-1-line-186">line 186</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.shift</code>,event: if the trigger element position or the duration changed</li>
    
        <li><code>Scene.change</code>,event: if the duration changed</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene = new ScrollMagic.Scene({triggerElement: "#trigger"});

// change the position of the trigger
$("#trigger").css("top", 500);
// immediately let the scene know of this change
scene.refresh();</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="remove"><span class="type-signature"></span>remove<span class="signature">()</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Remove the scene from the controller.<br>This is the equivalent to <code>Controller.removeScene(scene)</code>.<br>The scene will not be updated anymore until you readd it to a controller.<br>To remove the pin or the tween you need to call removeTween() or removePin() respectively.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_core.js.html">ScrollMagic/Scene/core.js</a>, <a href="ScrollMagic_Scene_core.js.html#sunlight-1-line-93">line 93</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// remove the scene from its controller
scene.remove();</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="removeClassToggle"><span class="type-signature"></span>removeClassToggle<span class="signature">(<span class="optional">reset</span>)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Remove the class binding from the scene.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>reset</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>If <code>false</code> and the classes are currently active, they will remain on the element. If <code>true</code> they will be removed.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_feature-classToggles.js.html">ScrollMagic/Scene/feature-classToggles.js</a>, <a href="ScrollMagic_Scene_feature-classToggles.js.html#sunlight-1-line-47">line 47</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// remove class binding from the scene without reset
scene.removeClassToggle();

// remove class binding and remove the changes it caused
scene.removeClassToggle(true);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="removePin"><span class="type-signature"></span>removePin<span class="signature">(<span class="optional">reset</span>)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Remove the pin from the scene.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>reset</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>If <code>false</code> the spacer will not be removed and the element's position will not be reset.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_feature-pinning.js.html">ScrollMagic/Scene/feature-pinning.js</a>, <a href="ScrollMagic_Scene_feature-pinning.js.html#sunlight-1-line-342">line 342</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// remove the pin from the scene without resetting it (the spacer is not removed)
scene.removePin();

// remove the pin from the scene and reset the pin element to its initial position (spacer is removed)
scene.removePin(true);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="setClassToggle"><span class="type-signature"></span>setClassToggle<span class="signature">(element, classes)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Define a css class modification while the scene is active.<br>When the scene triggers the classes will be added to the supplied element and removed, when the scene is over.<br>If the scene duration is 0 the classes will only be removed if the user scrolls back past the start position.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>A Selector targeting one or more elements or a DOM object that is supposed to be modified.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>classes</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>One or more Classnames (separated by space) that should be added to the element during the scene.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_feature-classToggles.js.html">ScrollMagic/Scene/feature-classToggles.js</a>, <a href="ScrollMagic_Scene_feature-classToggles.js.html#sunlight-1-line-9">line 9</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// add the class 'myclass' to the element with the id 'my-elem' for the duration of the scene
scene.setClassToggle("#my-elem", "myclass");

// add multiple classes to multiple elements defined by the selector '.classChange'
scene.setClassToggle(".classChange", "class1 class2 class3");</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="setPin"><span class="type-signature"></span>setPin<span class="signature">(element, <span class="optional">settings</span>)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Pin an element for the duration of the scene.<br>If the scene duration is 0 the element will only be unpinned, if the user scrolls back past the start position.<br>Make sure only one pin is applied to an element at the same time.<br>An element can be pinned multiple times, but only successively.<br><em><strong>NOTE:</strong> The option <code>pushFollowers</code> has no effect, when the scene duration is 0.</em></p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last"><p>A Selector targeting an element or a DOM object that is supposed to be pinned.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>settings</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>settings for the pin</p>
                <h6>Properties</h6>
                

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>pushFollowers</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    true
                
                </td>
            

            <td class="description last"><p>If <code>true</code> following elements will be &quot;pushed&quot; down for the duration of the pin, if <code>false</code> the pinned element will just scroll past them.<br>                                                    Ignored, when duration is <code>0</code>.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>spacerClass</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    "scrollmagic-pin-spacer"
                
                </td>
            

            <td class="description last"><p>Classname of the pin spacer element, which is used to replace the element.</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_feature-pinning.js.html">ScrollMagic/Scene/feature-pinning.js</a>, <a href="ScrollMagic_Scene_feature-pinning.js.html#sunlight-1-line-180">line 180</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// pin element and push all following elements down by the amount of the pin duration.
scene.setPin("#pin");

// pin element and keeping all following elements in their place. The pinned element will move past them.
scene.setPin("#pin", {pushFollowers: false});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">(<span class="optional">immediately</span>)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Updates the Scene to reflect the current state.<br>This is the equivalent to <code>Controller.updateScene(scene, immediately)</code>.<br>The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container.<br>It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress.<br>This means an update doesn't necessarily result in a progress change. The <code>progress</code> event will be fired if the progress has indeed changed between this update and the last.<br><em><strong>NOTE:</strong> This method gets called constantly whenever ScrollMagic detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters.</em></p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		
		<th>Default</th>
		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>immediately</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            
                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>If <code>true</code> the update will be instant, if <code>false</code> it will wait until next update cycle (better performance).</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_core.js.html">ScrollMagic/Scene/core.js</a>, <a href="ScrollMagic_Scene_core.js.html#sunlight-1-line-139">line 139</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li>Scene.event:update</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// update the scene on next tick
scene.update();

// update the scene immediately
scene.update(true);</pre>


    
</dd>

        </dl>
    
        <h3 class="subsection-title">Scene Parameters (getter / setter)</h3>

        <dl>
            
<dt>
    <h4 class="name" id="duration"><span class="type-signature"></span>duration<span class="signature">(<span class="optional">newDuration</span>)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the duration option value.</p>
<p>As a <strong>setter</strong> it accepts three types of parameters:</p>
<ol>
<li><code>number</code>: Sets the duration of the scene to exactly this amount of pixels.<br>This means the scene will last for exactly this amount of pixels scrolled. Sub-Pixels are also valid.<br>A value of <code>0</code> means that the scene is 'open end' and no end will be triggered. Pins will never unpin and animations will play independently of scroll progress.</li>
<li><code>string</code>: Always updates the duration relative to parent scroll container.<br>For example <code>&quot;100%&quot;</code> will keep the duration always exactly at the inner height of the scroll container.<br>When scrolling vertically the width is used for reference respectively.</li>
<li><code>function</code>: The supplied function will be called to return the scene duration.<br>This is useful in setups where the duration depends on other elements who might change size. By supplying a function you can return a value instead of updating potentially multiple scene durations.<br>The scene can be referenced inside the callback using <code>this</code>.<br><em><strong>WARNING:</strong> This is an easy way to kill performance, as the callback will be executed every time <code>Scene.refresh()</code> is called, which happens a lot. The interval is defined by the controller (see ScrollMagic.Controller option <code>refreshInterval</code>).<br>It's recomended to avoid calculations within the function and use cached variables as return values.<br>This counts double if you use the same function for multiple scenes.</em></li>
</ol>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newDuration</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>
|

<span class="param-type">string</span>
|

<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new duration setting for the scene.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-102">line 102</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.change</code>,event: when used as setter</li>
    
        <li><code>Scene.shift</code>,event: when used as setter</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    <ul>
            <li>
<div class="param-desc tag-returns">
    <p><code>get</code> -  Current scene duration.</p>

	{
<span class="param-type">number</span>

}

</div>

</li>
        
            <li>
<div class="param-desc tag-returns">
    <p><code>set</code> -  Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>

</li>
        </ul>
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current duration value
var duration = scene.duration();

// set a new duration
scene.duration(300);

// set duration responsively to container size
scene.duration("100%");

// use a function to randomize the duration for some reason.
var durationValueCache;
function durationCallback () {
  return durationValueCache;
}
function updateDuration () {
  durationValueCache = Math.random() * 100;
}
updateDuration(); // set to initial value
scene.duration(durationCallback); // set duration callback</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="enabled"><span class="type-signature"></span>enabled<span class="signature">(<span class="optional">newState</span>)</span><span class="type-signature"> &rarr; {boolean|Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the current enabled state of the scene.<br>This can be used to disable this scene without removing or destroying it.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newState</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new enabled state of the scene <code>true</code> or <code>false</code>.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_core.js.html">ScrollMagic/Scene/core.js</a>, <a href="ScrollMagic_Scene_core.js.html#sunlight-1-line-68">line 68</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Current enabled state or parent object for chaining.</p>

	{
<span class="param-type">boolean</span>
|

<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current value
var enabled = scene.enabled();

// disable the scene
scene.enabled(false);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="loglevel"><span class="type-signature"></span>loglevel<span class="signature">(<span class="optional">newLoglevel</span>)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the loglevel option value.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newLoglevel</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new loglevel setting of the scene. <code>[0-3]</code></p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-219">line 219</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.change</code>,event: when used as setter</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    <ul>
            <li>
<div class="param-desc tag-returns">
    <p><code>get</code> -  Current loglevel.</p>

	{
<span class="param-type">number</span>

}

</div>

</li>
        
            <li>
<div class="param-desc tag-returns">
    <p><code>set</code> -  Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>

</li>
        </ul>
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current loglevel
var loglevel = scene.loglevel();

// set new loglevel
scene.loglevel(3);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="offset"><span class="type-signature"></span>offset<span class="signature">(<span class="optional">newOffset</span>)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the offset option value.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newOffset</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new offset of the scene.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-148">line 148</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.change</code>,event: when used as setter</li>
    
        <li><code>Scene.shift</code>,event: when used as setter</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    <ul>
            <li>
<div class="param-desc tag-returns">
    <p><code>get</code> -  Current scene offset.</p>

	{
<span class="param-type">number</span>

}

</div>

</li>
        
            <li>
<div class="param-desc tag-returns">
    <p><code>set</code> -  Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>

</li>
        </ul>
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current offset
var offset = scene.offset();

// set a new offset
scene.offset(100);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="reverse"><span class="type-signature"></span>reverse<span class="signature">(<span class="optional">newReverse</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the reverse option value.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newReverse</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new reverse setting of the scene.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-203">line 203</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.change</code>,event: when used as setter</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    <ul>
            <li>
<div class="param-desc tag-returns">
    <p><code>get</code> -  Current reverse option value.</p>

	{
<span class="param-type">boolean</span>

}

</div>

</li>
        
            <li>
<div class="param-desc tag-returns">
    <p><code>set</code> -  Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>

</li>
        </ul>
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current reverse option
var reverse = scene.reverse();

// set new reverse option
scene.reverse(false);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="triggerElement"><span class="type-signature"></span>triggerElement<span class="signature">(<span class="optional">newTriggerElement</span>)</span><span class="type-signature"> &rarr; {string|object}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the triggerElement option value.<br>Does <strong>not</strong> fire <code>Scene.shift</code>, because changing the trigger Element doesn't necessarily mean the start position changes. This will be determined in <code>Scene.refresh()</code>, which is automatically triggered.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newTriggerElement</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new trigger element for the scene.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-165">line 165</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.change</code>,event: when used as setter</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    <ul>
            <li>
<div class="param-desc tag-returns">
    <p><code>get</code> -  Current triggerElement.</p>

	{
<span class="param-type">string</span>
|

<span class="param-type">object</span>

}

</div>

</li>
        
            <li>
<div class="param-desc tag-returns">
    <p><code>set</code> -  Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>

</li>
        </ul>
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current triggerElement
var triggerElement = scene.triggerElement();

// set a new triggerElement using a selector
scene.triggerElement("#trigger");
// set a new triggerElement using a DOM object
scene.triggerElement(document.getElementById("trigger"));</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="triggerHook"><span class="type-signature"></span>triggerHook<span class="signature">(<span class="optional">newTriggerHook</span>)</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> or <strong>Set</strong> the triggerHook option value.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>newTriggerHook</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>
|

<span class="param-type">string</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>The new triggerHook of the scene. See <code>Scene</code> parameter description for value options.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-184">line 184</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    
    <h5>Fires:</h5>
    <ul>
        <li><code>Scene.change</code>,event: when used as setter</li>
    
        <li><code>Scene.shift</code>,event: when used as setter</li>
    </ul>
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    <ul>
            <li>
<div class="param-desc tag-returns">
    <p><code>get</code> -  Current triggerHook (ALWAYS numerical).</p>

	{
<span class="param-type">number</span>

}

</div>

</li>
        
            <li>
<div class="param-desc tag-returns">
    <p><code>set</code> -  Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>

</li>
        </ul>
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current triggerHook value
var triggerHook = scene.triggerHook();

// set a new triggerHook using a string
scene.triggerHook("onLeave");
// set a new triggerHook using a number
scene.triggerHook(0.7);</pre>


    
</dd>

        </dl>
    
        <h3 class="subsection-title">Scene Properties (getter)</h3>

        <dl>
            
<dt>
    <h4 class="name" id="scrollOffset"><span class="type-signature"></span>scrollOffset<span class="signature">()</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> the current scroll offset for the start of the scene.<br>Mind, that the scrollOffset is related to the size of the container, if <code>triggerHook</code> is bigger than <code>0</code> (or <code>&quot;onLeave&quot;</code>).<br>This means, that resizing the container or changing the <code>triggerHook</code> will influence the scene's start offset.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-261">line 261</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>The scroll offset (of the container) at which the scene will trigger. Y value for vertical and X value for horizontal scrolls.</p>

	{
<span class="param-type">number</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current scroll offset for the start and end of the scene.
var start = scene.scrollOffset();
var end = scene.scrollOffset() + scene.duration();
console.log("the scene starts at", start, "and ends at", end);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="state"><span class="type-signature"></span>state<span class="signature">()</span><span class="type-signature"> &rarr; {string}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> the current state.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-248">line 248</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p><code>&quot;BEFORE&quot;</code>, <code>&quot;DURING&quot;</code> or <code>&quot;AFTER&quot;</code></p>

	{
<span class="param-type">string</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the current state
var state = scene.state();</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="triggerPosition"><span class="type-signature"></span>triggerPosition<span class="signature">()</span><span class="type-signature"> &rarr; {number}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p><strong>Get</strong> the trigger position of the scene (including the value of the <code>offset</code> option).</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_getters-setters.js.html">ScrollMagic/Scene/getters-setters.js</a>, <a href="ScrollMagic_Scene_getters-setters.js.html#sunlight-1-line-278">line 278</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Start position of the scene. Top position value for vertical and left position value for horizontal scrolls.</p>

	{
<span class="param-type">number</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">// get the scene's trigger position
var triggerPosition = scene.triggerPosition();</pre>


    
</dd>

        </dl>
    
        <h3 class="subsection-title">Event Handling</h3>

        <dl>
            
<dt>
    <h4 class="name" id="off"><span class="type-signature"></span>off<span class="signature">(names, <span class="optional">callback</span>)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Remove one or more event listener.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>names</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last"><p>The name or names of the event that should be removed.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>callback</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>A specific callback function that should be removed. If none is passed all callbacks to the event listener will be removed.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-268">line 268</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">function callback (event) {
		console.log("Event fired! (" + event.type + ")");
}
// add listeners
scene.on("change update", callback);
// remove listeners
scene.off("change update", callback);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="on"><span class="type-signature"></span>on<span class="signature">(names, callback)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Add one ore more event listener.<br>The callback function will be fired at the respective event, and an object containing relevant data will be passed to the callback.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>names</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name or names of the event the callback should be attached to.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>callback</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            
            </td>

            

            

            <td class="description last"><p>A function that should be executed, when the event is dispatched. An event object will be passed to the callback.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-228">line 228</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">function callback (event) {
		console.log("Event fired! (" + event.type + ")");
}
// add listeners
scene.on("change update progress start end enter leave", callback);</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="trigger"><span class="type-signature"></span>trigger<span class="signature">(name, <span class="optional">vars</span>)</span><span class="type-signature"> &rarr; {Scene}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Trigger an event.</p>
    </div>
    

    
    
    
    
    
        <h5>Parameters:</h5>
        

<table class="params table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th>Argument</th>
		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>name</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            
                <td class="attributes">
                

                

                
                </td>
            

            

            <td class="description last"><p>The name of the event that should be triggered.</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>vars</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                

                
                </td>
            

            

            <td class="description last"><p>An object containing info that should be passed to the callback.</p></td>
        </tr>

	
	</tbody>
</table>

    
    
    
<dl class="details">
    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-315">line 315</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    <h5>Returns:</h5>
    
            
<div class="param-desc tag-returns">
    <p>Parent object for chaining.</p>

	{
<span class="param-type">Scene</span>

}

</div>


        
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">this.trigger("change");</pre>


    
</dd>

        </dl>
    

    

    
        <h3 class="subsection-title">Events</h3>

        <dl>
            
<dt>
    <h4 class="name" id="event:add">add</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene add event.<br>Fires when the scene is added to a controller.<br>This is mostly used by plugins to know that change might be due.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>controller</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            

            

            <td class="description last"><p>The controller object the scene was added to.</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>2.0.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-192">line 192</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("add", function (event) {
	console.log('Scene was added to a new controller.');
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:change">change</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene change event.<br>Fires whenvever a property of the scene is changed.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>what</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates what value has been changed</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>newval</code></td>
            

            <td class="type">
            
                
<span class="param-type">mixed</span>


            
            </td>

            

            

            <td class="description last"><p>The new value of the changed property</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-130">line 130</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("change", function (event) {
	console.log("Scene Property \"" + event.what + "\" changed to " + event.newval);
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:destroy">destroy</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene destroy event.<br>Fires whenvever the scene is destroyed.<br>This can be used to tidy up custom behaviour used in events.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>reset</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates if the destroy method was called with reset <code>true</code> or <code>false</code>.</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>1.1.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-167">line 167</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("enter", function (event) {
       // add custom action
       $("#my-elem").left("200");
     })
     .on("destroy", function (event) {
       // reset my element to start position
       if (event.reset) {
         $("#my-elem").left("0");
       }
     });</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:end">end</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene end event.<br>Fires whenever the scroll position its the ending point of the scene.<br>It will also fire when scrolling back up from after the scene and going over its end position. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene <code>&quot;DURING&quot;</code> or <code>&quot;AFTER&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-29">line 29</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("end", function (event) {
	console.log("Hit end point of scene.");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:enter">enter</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene enter event.<br>Fires whenever the scene enters the &quot;DURING&quot; state.<br>Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene enters its active scroll timeframe, regardless of the scroll-direction.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene - always <code>&quot;DURING&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-50">line 50</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("enter", function (event) {
	console.log("Scene entered.");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:leave">leave</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene leave event.<br>Fires whenever the scene's state goes from &quot;DURING&quot; to either &quot;BEFORE&quot; or &quot;AFTER&quot;.<br>Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene leaves its active scroll timeframe, regardless of the scroll-direction.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene <code>&quot;BEFORE&quot;</code> or <code>&quot;AFTER&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-71">line 71</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("leave", function (event) {
	console.log("Scene left.");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:progress">progress</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene progress event.<br>Fires whenever the progress of the scene changes.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene <code>&quot;BEFORE&quot;</code>, <code>&quot;DURING&quot;</code> or <code>&quot;AFTER&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-110">line 110</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("progress", function (event) {
	console.log("Scene progress changed to " + event.progress);
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:remove">remove</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene remove event.<br>Fires when the scene is removed from a controller.<br>This is mostly used by plugins to know that change might be due.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>2.0.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-210">line 210</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("remove", function (event) {
	console.log('Scene was removed from its controller.');
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:shift">shift</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene shift event.<br>Fires whenvever the start or end <strong>scroll offset</strong> of the scene change.<br>This happens explicitely, when one of these values change: <code>offset</code>, <code>duration</code> or <code>triggerHook</code>.<br>It will fire implicitly when the <code>triggerElement</code> changes, if the new element has a different position (most cases).<br>It will also fire implicitly when the size of the container changes and the triggerHook is anything other than <code>onLeave</code>.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>reason</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates why the scene has shifted</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    
    <dt class="tag-since">Since:</dt>
    <dd class="tag-since"><ul class="dummy"><li>1.1.0</dd><br>
    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-147">line 147</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("shift", function (event) {
	console.log("Scene moved, because the " + event.reason + " has changed.)");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:start">start</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene start event.<br>Fires whenever the scroll position its the starting point of the scene.<br>It will also fire when scrolling back up going over the start position of the scene. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.</p>
<p>For details on this event and the order in which it is fired, please review the <code>Scene.progress</code> method.</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>progress</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>Reflects the current progress of the scene</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>state</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The current state of the scene <code>&quot;BEFORE&quot;</code> or <code>&quot;DURING&quot;</code></p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollDirection</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>Indicates which way we are scrolling <code>&quot;PAUSED&quot;</code>, <code>&quot;FORWARD&quot;</code> or <code>&quot;REVERSE&quot;</code></p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-8">line 8</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("start", function (event) {
	console.log("Hit start point of scene.");
});</pre>


    
</dd>

        
            
<dt>
    <h4 class="name" id="event:update">update</h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Scene update event.<br>Fires whenever the scene is updated (but not necessarily changes the progress).</p>
    </div>
    

    
    
    
    
    
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>event</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"><p>The event Object passed to each callback</p>
                <h6>Properties</h6>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		

		

		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"><p>The name of the event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Scene</span>


            
            </td>

            

            

            <td class="description last"><p>The Scene object that triggered this event</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>startPos</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>The starting position of the scene (in relation to the conainer)</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>endPos</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>The ending position of the scene (in relation to the conainer)</p></td>
        </tr>

	

        <tr>
            
                <td class="name"><code>scrollPos</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            
            </td>

            

            

            <td class="description last"><p>The current scroll position of the container</p></td>
        </tr>

	
	</tbody>
</table>

            </td>
        </tr>

	
	</tbody>
</table>
</dl>

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="ScrollMagic_Scene_event-management.js.html">ScrollMagic/Scene/event-management.js</a>, <a href="ScrollMagic_Scene_event-management.js.html#sunlight-1-line-92">line 92</a>
    </li></ul></dd>
    

    

    

    
</dl>

    
    

    

    
    
    
    
    
    
    
        <h5>Example</h5>
        
    <pre class="sunlight-highlight-javascript">scene.on("update", function (event) {
	console.log("Scene updated.");
});</pre>


    
</dd>

        </dl>
    
</article>

</section>




				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		© Jan Paepke 2015
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc" target="_blank">JSDoc 3.5.5</a>
		using a customized version of the <a href="https://github.com/terryweiss/docstrap" target="_blank">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<div class="span3">
				<div id="toc"></div>
			</div>
			
			<br clear="both">
		</div>

	</div>
	<script src="scripts/sunlight.js"></script>
	<script src="scripts/sunlight.javascript.js"></script>
	<script src="scripts/sunlight-plugin.doclinks.js"></script>
	<script src="scripts/sunlight-plugin.linenumbers.js"></script>
	<script src="scripts/sunlight-plugin.menu.js"></script>
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.scrollTo.js"></script>
	<script src="scripts/jquery.localScroll.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>

	<script> prettyPrint(); </script>
	<script>  Sunlight.highlightAll({lineNumbers:true,  showMenu: true, enableDoclinks :true}); </script>

	<script>
		function openDeeplinkedElement (skipAni) {
			try {
				$("dt h4.member-collapsed").filter(window.location.hash.substring(1).replace(":", "\\:")).trigger("click", skipAni);
			} catch (e) {
				console.warn("ah ah ah! :p");
			}
		}
		$( function () {
			$( "#toc" ).toc( {
			    anchorName  : function(i, heading, prefix) {
					return $(heading).attr("id") || ( prefix + i );
				},
				selectors   : "h1:visible,h2:visible,h3:visible,h4:visible",
				onScrollFinish : openDeeplinkedElement,
				highlightOffset : 10,
				scrollOffset: 60
			} );
			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );

		} );
	</script>

	
	<script>
		$( function () {
			// $('#main').localScroll({
			// 	offset: { top: 56 } //offset by the height of your header (give or take a few px, see what works for you)
			// });
			// workaround for anchors below header...
			window.setTimeout(function () {
				$(document).scrollTop($(document).scrollTop()-60);
			}, 1)
			
			var hash = window.location.hash.substring(1).replace(":", "\\:");
			$( "dt h4.name" ).each( function () {
				var $this = $( this );
				var icon = $( "<i/>" ).addClass( "icon-plus-sign" ).addClass( "pull-right" ).addClass( "icon-white" );
				var dt = $this.parents( "dt" );
				var children = dt.next( "dd" );

				$this.append( icon ).css( {cursor : "pointer"} );
				$this.addClass( "member-collapsed" ).addClass( "member" );
				if (hash != $this.attr("id")) {
					children.hide();
				}
				$this.toggle( function (e, skipAni) {
					var scrollPos = $(document).scrollTop();
					window.location.hash = $(this).attr("id");
					$(document).scrollTop(scrollPos);
					icon.addClass( "icon-minus-sign" ).removeClass( "icon-plus-sign" ).removeClass( "icon-white" );
					$this.addClass( "member-open" ).removeClass( "member-collapsed" );
					children.slideDown(skipAni ? 0 : undefined);
				}, function () {
					icon.addClass( "icon-plus-sign" ).removeClass( "icon-minus-sign" ).addClass( "icon-white" );
					$this.addClass( "member-collapsed" ).removeClass( "member-open" );
					children.slideUp();
				} );
			} );
			// open if deeplinked
			if (hash.length > 0)
				openDeeplinkedElement(true);
		} );
	</script>
	

	<script type="text/javascript" src="../assets/js/tracking.js"></script>
</body>
</html>